<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>按日统计分析</title>
	<link rel="stylesheet" type="text/css" href="/static/insdep/insdep.easyui.min.css"></link>
	<link rel="stylesheet" type="text/css" href="/static/insdep/icon.css"></link>
	<link rel="stylesheet" type="text/css" href="/static/insdep/custom.css"></link>
	<script type="text/javascript" src="/static/jquery-easyui-1.5/jquery.min.js"></script>
	<script type="text/javascript" src="/static/jquery-easyui-1.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="/static/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="/static/highcharts4/js/highcharts.js"></script>
	<script type="text/javascript" src="/static/js/date.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			// 初始化开始日期，添加验证逻辑
			initDate("#s_begin", genLastWeekDayStr());
			// 初始化结束日期，添加验证逻辑
			initDate("#s_end", genTodayStr());
			// 调用search函数，用于展示相关数据
			search();
		});

		function initDate(dateboxId, defaultValue) {
			var today = new Date();
			var year = today.getFullYear();
			var month = today.getMonth() + 1;
			var day = today.getDate();
			var todayStr = year + '-' + (month < 10? '0' + month : month) + '-' + (day < 10? '0' + day : day);

			var targetDate = new Date(defaultValue);
			var targetYear = targetDate.getFullYear();
			var targetMonth = targetDate.getMonth() + 1;
			var targetDay = targetDate.getDate();
			var targetDateStr = targetYear + '-' + (targetMonth < 10? '0' + targetMonth : targetMonth) + '-' + (targetDay < 10? '0' + targetDay : targetDay);

			// 确保默认日期不超过今天
			if (compareDates(targetDateStr, todayStr) > 0) {
				targetDateStr = todayStr;
			}

			// 使用easyui-datebox插件初始化日期框，并设置初始值
			$(dateboxId).datebox({
				value: targetDateStr
			});

			// 定义一个变量来标记是否已经弹出过提示框，避免重复弹窗
			var hasAlerted = false;

			// 给日期选择框添加onChange事件监听，进行严格的日期验证
			$(dateboxId).datebox('calendar').calendar({
				onChange: function (date) {
					var startDate = $("#s_begin").datebox("getValue");
					var endDate = $("#s_end").datebox("getValue");

					// 检查开始日期是否晚于结束日期
					if (compareDates(startDate, endDate) > 0 &&!hasAlerted) {
						alert("开始日期不能晚于结束日期，请重新选择！");
						// 设置标记为已弹出提示框
						hasAlerted = true;
						// 恢复原来的值
						$(dateboxId).datebox("setValue", targetDateStr);
						return;
					}

					// 检查结束日期是否超过今天
					if (dateboxId === "#s_end" && compareDates(endDate, todayStr) > 0 &&!hasAlerted) {
						alert("结束日期不能超过当天日期，请重新选择！");
						hasAlerted = true;
						$(dateboxId).datebox("setValue", targetDateStr);
						return;
					}

					// 如果当前选择符合要求，重置标记变量，以便下次验证
					hasAlerted = false;
				}
			});
		}

		function compareDates(date1, date2) {
			var d1 = new Date(date1);
			var d2 = new Date(date2);
			return d1 - d2;
		}

		function search() {
			$('#dg').datagrid('loadData', { total: 0, rows: [] });

			var chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					type: 'column',
					events: {
						load: function (event) {
							var begin = $("#s_begin").datebox("getValue");
							var end = $("#s_end").datebox("getValue");
							// 发起一个POST类型的ajax请求，请求的URL是/admin/saleList/countSaleByDay，同时传递begin和end这两个参数（开始日期和结束日期）到后台
							$.post("/admin/saleList/countSaleByDay", { begin: begin, end: end }, function (result) {
								var rows = result.rows;
								var xArr = new Array();
								var yArr = new Array();
								for (var i = 0; i < rows.length; i++) {
									xArr.push(rows[i].date);
									yArr.push(rows[i].amountProfit);
									chart.xAxis[0].categories = xArr;
									chart.series[0].setData(yArr);
								}

								var saleTotal = 0, costTotal = 0, profitTotal = 0;
								for (var i = 0; i < rows.length; i++) {
									var row = rows[i];
									$('#dg').datagrid('appendRow', {
										date: row.date,
										amountSale: row.amountSale,
										amountCost: row.amountCost,
										amountProfit: row.amountProfit
									});
									saleTotal += row.amountSale;
									costTotal += row.amountCost;
									profitTotal += row.amountProfit;
								}
								$('#dg').datagrid('appendRow', {
									date: "合计",
									amountSale: saleTotal,
									amountCost: costTotal,
									amountProfit: profitTotal
								});
							}, "json");
						}
					}
				},
				title: {
					text: '按日统计分析'
				},
				xAxis: {
					title: '日期',
					categories: []
				},
				yAxis: {
					title: {
						text: '销售利润'
					}
				},
				series: [{
					name: '销售利润',
					data: []
				}]
			});
		}

		function formatMoney(val, row) {
			// 将传入的数值格式化为带有两位小数的人民币格式字符串，例如将数字转换为"￥X.XX"的形式并返回
			return "￥" + val.toFixed(2);
		}

		function genLastWeekDayStr() {
			// 这里可以根据实际需求实现生成上周日期的逻辑，以下是简单示例，获取当前日期并往前推7天
			var today = new Date();
			today.setDate(today.getDate() - 7);
			var year = today.getFullYear();
			var month = today.getMonth() + 1;
			var day = today.getDate();
			return year + '-' + (month < 10? '0' + month : month) + '-' + (day < 10? '0' + day : day);
		}

		function genTodayStr() {
			var today = new Date();
			var year = today.getFullYear();
			var month = today.getMonth() + 1;
			var day = today.getDate();
			return year + '-' + (month < 10? '0' + month : month) + '-' + (day < 10? '0' + day : day);
		}
	</script>
</head>

<body>
<div style="height: 100px; padding: 10px; border: 0px;">
	<fieldset style="border-color: #E7F0FF">
		<legend>统计设置</legend>
		<div style="padding: 5px">
			统计时间：<input id="s_begin" class="easyui-datebox" editable="false" style="width: 100px">
			&nbsp;&nbsp;-&nbsp;&nbsp;
			<input id="s_end" class="easyui-datebox" editable="false" style="width: 100px">
			&nbsp;&nbsp;<a href="javascript:search()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
		</div>
	</fieldset>
</div>

<div style="padding-left: 10px; padding-right: 10px; border: 0px; height: 350px;">
	<div id="container"></div>
</div>

<div style="padding: 10px; border: 0px; height: 230px">
	<table id="dg" class="easyui-datagrid" fit="true" fitColumns="true" rownumbers="true" singleSelect="true">
		<thead>
		<tr>
			<th field="date" width="30" align="center">日期</th>
			<th field="amountSale" width="150" align="right" formatter="formatMoney">销售金额</th>
			<th field="amountCost" width="50" align="right" formatter="formatMoney">成本金额</th>
			<th field="amountProfit" width="50" align="right" formatter="formatMoney">盈利金额</th>
		</tr>
		</thead>
	</table>
</div>

</body>

</html>